<template>
	<view>
		<view class="search">
			<u-search placeholder="请输入搜索内容" :clearabled="true" margin="30rpx" bgColor="#eee" :showAction="false"
				disabled @click="Jump" v-model="keyword">
			</u-search>
		</view>
		<view class="contentBox">
			<!-- 左侧栏 -->
			<view class="content_left">
				<view class="ul">
					<view :class="{li:true,active:index==num}" v-for="(item,index) in categoryList" :key="item.id"
						@click="leftNavClick(index,item.id)">
						{{item.name}}
					</view>
				</view>

			</view>
			<!-- 右侧栏 -->
			<view class="content_right">
				<view class="content_right_box">
					<!-- 顶部banner -->
					<view class="content_right_top">
						<view style="position: relative;">
							<image style="margin:20rpx 10rpx;width:75vw;height:280rpx; border-radius: 30rpx;"
								:src="currentCategory.banner_url"></image>
							<view class="mask">
								<view>{{currentCategory.front_name}}</view>
							</view>

						</view>

					</view>
					<!-- 底部宫格 -->
					<view class="grid">
					</view>

					<u-grid @click="click" col="3" :border="true">
						<u-grid-item v-for="(item,index) in subCategoryList" :key="item.id">
							<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.banner_url" :size="22"></u-icon>
							<text class="grid-text">{{item.name}}</text>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import request from "../../request/request.js";
	import {
		classifyAllAPI,
		classifyCurrentAPI

	} from "../../request/api.js"
	export default {
		data() {
			return {
				num: 0,
				keyword: "",
				currentCategory: [],
				categoryList: [],
				subCategoryList: [],
				id: ""
			}
		},
		onShow() {
			this.requestHas()
		},
		methods: {
			// 请求封装
			requestHas(id = "") {
				request({
					data: {
						id: id ? id : ""
					},
					url: classifyAllAPI,
					successCallBack: (res) => {
						console.log(res)
						const {
							categoryList,
							currentCategory,

						} = res.data.data
						this.currentCategory = currentCategory;
						this.categoryList = categoryList;
						this.subCategoryList = currentCategory.subCategoryList
						console.log(this.currentCategory, this.categoryList)
					}
				})
			},

			// 左侧导航栏点击
			leftNavClick(index, id) {
				this.num = index
				this.requestHas(id)

			}

		}
	}
</script>

<style lang="scss" scoped>
	.mask {
		margin: 20rpx 10rpx;
		width: 75vw;
		height: 280rpx;
		border-radius: 30rpx;
		position: absolute;
		top: 0;
		left: 0;
		background-color: black;
		filter: alpha(Opacity=80);
		-moz-opacity: 0.5;
		opacity: 0.5;
		color: #fff;
		line-height: 280rpx;
		text-align: center;


	}

	.contentBox {
		display: flex;
		justify-content: space-between;


		.content_left {
			width: 22%;
			overflow-y: auto;
			height: 100vh;

			.ul {
				background-color: #ccc;
				height: 2000rpx;

				.active {
					background-color: #fff;
					border-left: 12rpx solid red;
				}

				.li {

					padding: 40rpx;
					width: 95rpx;
					height: 40rpx;
					line-height: 40rpx;
				}
			}
		}

		.content_right {
			width: 78%;
			overflow-y: auto;
			height: 100vh;

			.content_right_box {
				height: 2000rpx;
			}
		}
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	/deep/ .u-grid-item:last-child {
		border-right: 0.5px solid #dadbde !important;
		border-bottom: 0.5px solid #dadbde !important;
	}

	.u-grid-item:nth-of-type(7) {
		border-right: 0.5px solid #dadbde !important;
		border-bottom: 0.5px solid #dadbde !important;
	}

	.u-grid-item:nth-of-type(8) {
		border-right: 0.5px solid #dadbde !important;
		border-bottom: 0.5px solid #dadbde !important;
	}

	.u-grid-item:nth-of-type(10) {
		border-right: 0.5px solid #dadbde !important;
		border-bottom: 0.5px solid #dadbde !important;

	}
</style>
